<template>
  <div>
    <el-row>
      <el-col style="background-color: #F5F5F5;">
        <div class="sort-box">
          <el-row>
            <el-col :span="6" v-for="(item,index) in sort" :key="index">
              <div class="sort">
                <a href="javascript:" class="sort-img">
                  <img :src="item.src" />
                </a>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="limited">
                <h3 class="buy">限时购</h3>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="limited1">
                <span>
                  距离本期结束
                  <i>00</i>
                  <em>天</em>
                  <i>{{tem}}</i>
                  <em>时</em>
                  <i>{{branch}}</i>
                  <em>分</em>
                  <i>{{second}}</i>
                  <em>秒</em>
                </span>
              </div>
            </el-col>
            <el-col :span="3" :push="14">
              <div class="limited2">
                <a href="javascript:">查看更多<i class="fa fa-angle-right" aria-hidden="true"></i></a>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col style="background-color: #F5F5F5;">
        <div class="product">
          <el-row>
            <el-col :span="8">
              <div class="product-img">
                <a href="javascript:" class="img1">
                  <img src="//image8.wbiao.co/mall/79a8256908204da5adb68ab95962fd5b.jpg" />
                </a>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="product-img2">
                <el-carousel trigger="click" height="280px">
                  <el-carousel-item v-for="(item,index) in carsoulist" :key="index">
                    <ul>
                      <li>
                        <div class="img2-img">
                          <img :src="item.url" />
                        </div>
                        <p class="title">{{item.title}}</p>
                        <p class="price"><em>{{item.em}}折</em><span>¥{{item.span}}</span></p>
                        <del class="cost">¥{{item.cost}}</del>
                      </li>
                      <li>
                        <div class="img2-img">
                          <img :src="item.url2" />
                        </div>
                        <p class="title">{{item.title2}}</p>
                        <p class="price"><em>{{item.em2}}折</em><span>¥{{item.span2}}</span></p>
                        <del class="cost">¥{{item.cost2}}</del>
                      </li>
                      <li>
                        <div class="img2-img">
                          <img :src="item.url3" />
                        </div>
                        <p class="title">{{item.title3}}</p>
                        <p class="price"><em>{{item.em3}}折</em><span>¥{{item.span3}}</span></p>
                        <del class="cost">¥{{item.cost3}}</del>
                      </li>
                    </ul>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="product-img3">
                <el-carousel trigger="click" height="245px" indicator-position="outside">
                  <el-carousel-item v-for="(item,index) in img3" :key="index">
                    <a href="javascirpt:" class="img3-a">
                      <img :src="item.src" />
                    </a>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tem: "",
        branch: "",
        second: "",
        sort: [{
            src: "//image8.wbiao.co/mall/1db5b7474db2419a8a76336b832b1af2.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/c9950e77c52644b6a51d20a83bb8ddd5.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/221bf97e54a84ef48d0e18ba553371a7.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/3d11d79ae530425895dbbb6b69f5d352.jpg"
          }
        ],
        carsoulist: [{
            url: "//image8.wbiao.co/shop/f33627d83cff43f8b0c9596f9f371c39.jpg",
            title: "海鸥",
            em: "6.4",
            span: "1,889",
            cost: "5.350",
            url2: "//image8.wbiao.co/shop/5aca0f0137fb468b820276a377cb35b8.jpg",
            title2: "豪利时",
            em2: "5.8",
            span2: "10,092",
            cost2: "17,400",
            url3: "//image8.wbiao.co/shop/201704_27_DGA802056_WWB_25155.jpg",
            title3: "飞亚达",
            em3: "5.8折",
            span3: "1,249",
            cost3: "2,180"
          },
          {
            url: "//image8.wbiao.co/shop/14ded5f4d9a446b88c2a3104f0192af8.jpg",
            title: "蕾蒙威",
            em: "4.9",
            span: "7,595",
            cost: "15,500",
            url2: "//image8.wbiao.co/shop/5e859a69b6fd47ada8655c002f49bba7.jpg",
            title2: "SWISS MILITARY HANOWA瑞士军表",
            em2: "4.8",
            span2: "1,482",
            cost2: "3,088",
            url3: "//image8.wbiao.co/shop/245ce02778de4d2b90bc454297fd8d84.jpg",
            title3: "梵德宝",
            em3: "3.5",
            span3: "13,317",
            cost3: "38,050"
          },
          {
            url: "//image8.wbiao.co/shop/b4a4e1c73ce64e999a5a316e04951e8b.jpg",
            title: "雪铁纳",
            em: "7.8",
            span: "4,173",
            cost: "5,350",
            url2: "//image8.wbiao.co/shop/39615789c11840eb987d70f96029a695.jpg",
            title2: "宝珀",
            em2: "7.6",
            span2: "99,999",
            cost2: "133,000",
            url3: "//image8.wbiao.co/shop/201311_19_2806_1BIA_80435.jpg",
            title3: "库尔沃",
            em3: "4.3",
            span3: "9,888",
            cost3: "23,200"
          },
          {
            url: "//image8.wbiao.co/shop/16e0d513fdf24b52878c6f23daf77e2b.jpg",
            title: "恒圆",
            em: "6.8",
            span: "1,618",
            cost: "2,380",
            url2: "//image8.wbiao.co/shop/af75268aea224e8aa4ff55968c2101ef.jpg",
            title2: "MINI",
            em2: "6.8",
            span2: "2,410",
            cost2: "3,550",
            url3: "//image8.wbiao.co/shop/066986029e56444ca2a91f55c25e8146.jpg",
            title3: "美度",
            em3: "6.8",
            span3: "10,999",
            cost3: "16,400"
          }
        ],
        img3: [{
            src: "//image8.wbiao.co/mall/3b903d0cf34b4c41ba49f52454942bd3.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/3076f307b0324f17ae3ded42a7d14d91.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/9a3a0f5f9a674646a916044e4210590b.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/8401af51017c468fa0c7580ef1ffcaec.jpg"
          },
          {
            src: "//image8.wbiao.co/mall/951314c62bb04248969c99a3d4eaf7b8.jpg"
          }
        ]
      }
    },
    components: {

    },
    methods: {
      getDate() {
          let ten=Math.floor(Math.random()*60)
          let branch=Math.floor(Math.random()*60)
          let second=60
          setInterval(()=>{
            second=second
            branch=branch
            second--
            if(second==0){
              second=60
              branch--
              if(branch==0){
                branch=Math.floor(Math.random()*60)
                ten--
              }
            }
            this.tem=ten
            this.branch=branch
            this.second=second
          },1000)
      }
    },
    mounted() {
      this.getDate()
    }
  }
</script>

<style scoped="scoped">
  @import url("../../static/style/font-awesome-4.7.0/css/font-awesome.css");

  .sort-box {
    /* border: 1px solid red; */
    width: 1200px;
    margin: 0 auto;
    background-color: #f5f5f5;
  }

  .sort-box .sort-img {
    display: block;
    overflow: hidden;
  }

  .sort-box .sort-img img {
    transition: transform 0.3s;
  }

  .sort-box .sort-img img:hover {
    transform: scale(1.1);

  }

  .sort-box .limited {
    /* border: 1px solid blue; */

  }

  .sort-box .limited .buy {
    font-size: 20px;
    color: #cc5252;
    padding-left: 15px;
    padding-top: 20px;
  }

  .sort-box .limited1 {
    /* border: 1px solid blue; */
    background-color: #b43738;
    border-radius: 25px;
    height: 28px;
    margin-top: 20px;
  }

  .sort-box .limited1,
  .sort-box .limited2 {
    margin-top: 20px;
  }

  .sort-box .limited1 span {
    display: inline-block;
    font-size: 12px;
    color: #FFFFFF;
    padding-left: 19px;
    line-height: 28px;
  }

  .sort-box .limited1 span i,
  em {
    font-style: normal;
  }


  .sort-box .limited2:after {
    content: "";
    display: table;
    clear: both;
  }

  .sort-box .limited2 a {
    float: right;
    font-size: 12px;
    color: #666;
    margin-right: 7px;
    line-height: 28px;
  }

  .sort-box .limited2 a:hover {
    text-decoration: underline;
  }

  .product {
    /* border: 1px solid blue; */
    width: 1200px;
    margin: 0 auto;

  }

  .product .product-img {

    margin-top: 15px;
  }

  .product .product-img .img1 {
    display: block;
    overflow: hidden;

  }

  .product .product-img .img1 img {
    transition: transform 1s;
  }

  .product .product-img .img1 img:hover {
    transform: scale(1.1);
  }

  .product .product-img2 {
    margin-top: 15px;
    /*  width: 100px;
    height: 100px; */
    width: 580px;
    background-color: #fff;
    /* margin-left: 14px; */
    /* border: 1px solid blue; */
    margin-left: 10px;
  }

  .product .product-img2 ul li {
    width: 171px;
    height: 280px;
    float: left;
    /* margin-right: 10px; */
    cursor: pointer;
    /* border: 1px solid red; */

  }

  .product .product-img2 ul li .img2-img {
    width: 166px;
    height: 166px;
  }

  .product .product-img2 ul li .img2-img img {
    max-height: 100%;
    width: 100%;
  }

  .product .product-img2 ul li .title {
    text-align: center;
    color: #666;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product .product-img2 ul li .price {
    text-align: center;
    height: 20px;
  }

  .product .product-img2 ul li .price em {
    font-family: DIN-Bold;
    font-size: 12px;
    line-height: 20px;
    background-color: #cc5252;
    color: #FFFFFF;
    display: inline-block;
    width: 50px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  .product .product-img2 ul li .price span {
    background-color: #f2f2f2;
    color: #cc5252;
    font-size: 12px;
    font-family: DIN-Bold;
    line-height: 20px;
    width: 50px;
    display: inline-block;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .product .product-img2 ul li .cost {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999;
    padding-top: 8px;
  }

  .product .product-img3 {
    margin-top: 15px;
    /* margin-left: 15px; */
    background-color: #fff;
    margin-left: 14px;

  }

  .product .product-img3 .img3-a {
    display: block;
    width: 142px;
    /* height: 205px; */
    margin: 0 auto;


  }

  .product .product-img3 .img3-a img {
    width: 100%;
    /* max-height: 100%; */

  }

  .el-col-8 {
    width: initial;
  }
</style>
